# 记得修改服务器上面的分页数目为20行分页
React = require('react')
Toast = require('antd-mobile/lib/toast')
DatePicker = require('antd-mobile/lib/date-picker')
List = require('antd-mobile/lib/list')
RefreshControl = require('antd-mobile/lib/refresh-control')
{View,ActivityIndicator,TextInput,DatePickerAndroid,Image,Text,ScrollView,TouchableHighlight,StyleSheet,Navigator,ListView,TouchableOpacity} = require('react-native')
Dimensions = require('Dimensions')
{ width, height } = Dimensions.get('window')
{View} = require('react-native')
{fetchGetList,fetchRefreshList} = require('../actions/page_ygxlxcx.js')
{connect} = require('react-redux')
_ = require('underscore')
moment = require('moment')
maxDate = moment('2018-12-31', 'YYYY-MM-DD Z').utcOffset(8);
minDate = moment('2010-01-01', 'YYYY-MM-DD Z').utcOffset(8);

backImg = require('../img/back.png')
DatePickerItem = require('../components/datePickerItem.js')
# DatePickerItem = (props)->
#     <TouchableOpacity style={{flex:1}} onPress={props.onClick}>
#       <View style={{flex:1,minHeight:10, borderBottomWidth:1,borderColor:'#000000'}}>
#         <Text>{props.extra}</Text>
#       </View>
#     </TouchableOpacity>
page_Ygxlxcx = React.createClass
  getInitialState:->
    @ds = new ListView.DataSource rowHasChanged:(r1,r2)->r1 isnt r2
    # @gqState = 0
    {
      isFirstLoad:true
      startDate:null
      endDate:null
    }
  componentDidMount:->
    @setState isFirstLoad:false
  onEndReached:->
    debugger
    if @props.list.length >= 20 and @props.completed isnt true
      @props.fetchGet(@props.pageIndex+1,@state.startDate,@state.endDate,@props.token)
  _processTime:(time)->
    debugger
    t = moment(time,'YYYY-M-D')
    t.format('YYYY-MM-DD')
  _renderHeader:->
      <View style={{flexDirection:'row',flex:0,height:60,alignItems:'center', justifyContent:'center',backgroundColor:'#0066FF'}}>
        <View style={{flex:1,padding:10}}>
          <TouchableOpacity onPress={=>@props.navigator.pop()}>
            <Image source={backImg}  style={{height:30,width:30,resizeMode:'contain'}}/>
          </TouchableOpacity>
        </View>
        <View style={{flex:3,justifyContent:'center',alignItems:'center'}}>
          <Text style={{fontSize:20,color:'#ffffff'}}>已公休/轮休查询</Text>
        </View>
        <View style={{flex:1,alignItems:'flex-end',padding:10}}>
          <TouchableOpacity>
          </TouchableOpacity>
        </View>
      </View>
  searchClickHandle:->
    # @props.fetchRefresh(@state.startDate+" 00:00:00",@state.endDate+" 00:00:00",@props.token)
    if @state.startDate and @state.endDate
      [s,e] = [@state.startDate.format('YYYY-MM-DD'),@state.endDate.format('YYYY-MM-DD')]
      @props.fetchRefresh(s,e,@props.token)

  startDateHandler:->
    DatePickerAndroid.open().then (result)=>
      debugger
      if result.action isnt DatePickerAndroid.dismissedAction
        @setState startDate: @_processTime("#{result.year}-#{result.month+1}-#{result.day}")
  endDateHandler:->
      DatePickerAndroid.open().then (result)=>
        if result.action isnt DatePickerAndroid.dismissedAction
          @setState endDate: @_processTime("#{result.year}-#{result.month+1}-#{result.day}")
  formatDatePicker:(m)->
    return m.format("YY/MM/DD")

  _renderSearchBar:->
    <View style={{flexDirection:'column'}}>
      <View style={{flexDirection:'row',margin:10,alignItems:'center'}}>
        <View>
          <Text style={{fontSize:18}}>日期</Text>
        </View>
        <View style={{flex:1}}>
          <DatePicker triggerType={"onClick"}  mode="date" title="选择日期" extra="" value={@state.startDate} minDate={minDate} maxDate={maxDate}
            onChange={(date)=>@setState startDate:date}>
            <DatePickerItem></DatePickerItem>
          </DatePicker>
        </View>
        <View>
          <Text style={{fontSize:18}}>~</Text>
        </View>
        <View style={{flex:1}}>
          <DatePicker mode="date" title="选择日期"   extra="" value={@state.endDate} minDate={minDate} maxDate={maxDate}
            onChange={(date)=>@setState endDate:date}>
            <DatePickerItem></DatePickerItem>
          </DatePicker>
        </View>
        <View>
          <TouchableHighlight onPress={@searchClickHandle}>
            <Text style={{fontSize:18}} >查询</Text>
          </TouchableHighlight>
        </View>
      </View>
    </View>
  _processState:(code)->
    state =
      '8':'公派'
      '11':'学习'
      '12':'考证'
      '13':'病假'
      '14':'轮休'
      '15':'公休'
      '16':'拉牌'
      '17':'其他'
      '22':'停止引航'
      '23':'事假'
      '24':'VTS值班'
    return state[code]

  _renderRow:(rowData,sectionID,rowID,highlightRow)->
    <View key={rowData.NMID}>
      <View style={styles.row}>
        <Text style={[styles.text,{fontWeight:'bold'}]}>
          {rowData.VCPILOTNAME}
        </Text>
        <Text style={[styles.text,{fontWeight:'bold'}]}>
          {@_processState(rowData.CHPILOTSTATE)}
        </Text>
        <Text style={[styles.text,{fontWeight:'bold'}]}>
          {"天数：#{rowData.NMDAYNUM}"}
        </Text>
      </View>
      <View style={styles.row}>
        <Text style={styles.text}>
          {"开始时间：#{@_processTime(rowData.DTBEGINTIME)} #{rowData.VCMIDDAY1}"}
        </Text>
      </View>
      <View style={styles.row}>
        <Text style={styles.text}>
          {"结束时间：#{@_processTime(rowData.DTENDTIME)} #{rowData.VCMIDDAY2}"}
        </Text>
      </View>
      <View style={styles.row}>
        <Text style={styles.text}>
          {"备注：#{rowData.VCMEMO}"}
        </Text>
      </View>
    </View>
  _renderListFooter:->
    if @props.isLoading
      <View style={{flexDirection:'row',justifyContent:'center',paddingBottom:20}}>
        <ActivityIndicator size='small'></ActivityIndicator>
        <Text>正在加载</Text>
      </View>
  _renderListSeparator:(sectionID,rowID)->
    <View key={rowID} style={{height:1,backgroundColor:'#CCCCCC'}}/>
  _renderListView:->
    <ListView dataSource={@dataSource} style={{flex:1}}
          enableEmptySections={true}
          renderHeader={@_renderListHeader}
          renderRow={@_renderRow}
          renderSeparator={this._renderListSeparator}
          renderFooter={@_renderListFooter}
          initiaListSize:10
          pageSize={20}
          scrollEventThrottle={20}
          onEndReached={@onEndReached}
          onEndReachedThreshold={10}
          stickyHeader
          stickyProps={{
            stickyStyle: { zIndex: 999, top: 43 },
            topOffset: -43,
          }}
          refreshControl={
            <RefreshControl refreshing={@props.refreshing} onRefresh={@refreshList}
                distanceToRefresh={60}
                resistance={2.5}
                hammerOptions={{
                  touchAction:'auto'
                  recognizers:
                    pan:
                      threshold:10
                  }}/>
          }>
    </ListView>
  _renderBody:->
    debugger
    if @state.isFirstLoad
      <View style={width:width,height:height,backgroundColor:'#ffffff'}/>
    else
      @_renderListView()
  render:->
    @dataSource = @ds.cloneWithRows(@props.list)
    <View style={width:width,height:height,flexDirection:'column',backgroundColor:'#ffffff',paddingBottom:10}>
      {@_renderHeader()}
      {@_renderSearchBar()}
      <View  style={{height:1,width:width,backgroundColor:'#CCCCCC'}}/>
      {@_renderBody()}
    </View>

styles = StyleSheet.create
  row:
    flexDirection:'row'
    justifyContent:'center'
    padding:10

  text:
    flex:1


# <View style={{flex:1}}>
#   <TextInput style={{fontSize:18}} value={@state.startDate} onFocus={@startDateHandler}></TextInput>
# </View>
# <View>
#   <Text style={{fontSize:18}}>~</Text>
# </View>
# <View style={{flex:1}}>
#   <TextInput style={{fontSize:18}} value={@state.endDate} onFocus={@endDateHandler}></TextInput>
# </View>
mapStateToProps = (state)->
  list:state.page_ygxlxcx.list
  isLoading:state.page_ygxlxcx.isLoading
  pageIndex:state.page_ygxlxcx.pageIndex
  completed:state.page_ygxlxcx.completed
  refreshing:state.page_ygxlxcx.refreshing
  lastFetchTime:state.page_ygxlxcx.lastFetchTime
  connected:state.appState.connected
  token:state.userInfo.token
mapDispatchToProps = (dispatch,wonProps)->
  fetchGet:(pageNum,startDate,endDate,token)->
    dispatch fetchGetList(pageNum,startDate,endDate,token)
  fetchRefresh:(startDate,endDate,token)->
    debugger
    dispatch fetchRefreshList(startDate,endDate,token)

module.exports = connect(mapStateToProps,mapDispatchToProps)(page_Ygxlxcx)
